<template>
  <div class="c2c-chat">
    <fullscreen-img></fullscreen-img>
    <loading></loading>
    <div class="chat-tips" v-if="initNimSuccess" @click="onOpen">
      <span class="msg">
        <i class="icon-circle" v-show="unread > 0">
          <em>{{unread}}</em>
        </i>
      </span>
      <div class="chat-text">{{$t('l.chat_message18')}}</div>
    </div>
    <el-dialog
      :title="$t('l.chat_message19')"
      :visible.sync="chatDlgVisibled"
      @close="onClose"
      width="840px"
      custom-class="chat-dialog"
      center
      v-dialogDrag
    >
      <div style="height: 640px;">
        <div class="m-chat-section" style="height: 100%;">
          <div class="m-chat-left">
            <session></session>
          </div>
          <div class="m-chat-main">
            <chat-list
              type="session"
              :msglist="msglist"
              :userInfos="userInfos"
              :myInfo="myInfo"
              :canLoadMore="canLoadMore"
              @msgs-loaded="msgsLoaded"
            ></chat-list>
            <chat-editor type="session" :scene="scene" :to="to"></chat-editor>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ChatEditor from "@/components/chat/ChatEditor";
import ChatList from "@/components/chat/ChatList";
import Session from "@/components/chat/Session";
import Loading from "@/components/chat/Loading";
import FullscreenImg from "@/components/chat/FullscreenImg";
import util from "@/utils";
import pageUtil from "@/utils/page";

export default {
  directives: {
    dialogDrag: {
      bind(el, binding, vnode, oldVnode) {
        const dialogHeaderEl = el.querySelector(".el-dialog__header");
        const dragDom = el.querySelector(".el-dialog");
        dialogHeaderEl.style.cursor = "move";

        // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
        const sty =
          dragDom.currentStyle || window.getComputedStyle(dragDom, null);

        dialogHeaderEl.onmousedown = e => {
          // 鼠标按下，计算当前元素距离可视区的距离
          const disX = e.clientX - dialogHeaderEl.offsetLeft;
          const disY = e.clientY - dialogHeaderEl.offsetTop;

          // 获取到的值带px 正则匹配替换
          let styL, styT;

          // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
          if (sty.left.includes("%")) {
            styL =
              +document.body.clientWidth * (+sty.left.replace(/\%/g, "") / 100);
            styT =
              +document.body.clientHeight * (+sty.top.replace(/\%/g, "") / 100);
          } else {
            styL = +sty.left.replace(/\px/g, "");
            styT = +sty.top.replace(/\px/g, "");
          }

          document.onmousemove = function(e) {
            // 通过事件委托，计算移动的距离
            const l = e.clientX - disX;
            const t = e.clientY - disY;

            // 移动当前元素
            dragDom.style.left = `${l + styL}px`;
            dragDom.style.top = `${t + styT}px`;

            // 将此时的位置传出去
            // binding.value({x:e.pageX,y:e.pageY})
          };

          document.onmouseup = function(e) {
            document.onmousemove = null;
            document.onmouseup = null;
          };
        };
      }
    }
  },
  props: {
    detailsId: String
  },
  components: {
    Session,
    ChatEditor,
    ChatList,
    Loading,
    FullscreenImg
  },
  // 进入该页面，文档被挂载
  mounted() {
    // pageUtil.scrollChatListDown();
  },
  updated() {
    // pageUtil.scrollChatListDown();
  },
  // 离开该页面，此时重置当前会话
  destroyed() {
    // this.$store.dispatch("resetCurrSession");
  },
  data() {
    return {
      chatDlgVisibled: false,
      leftBtnOptions: {
        backText: " ",
        preventGoBack: true
      }
    };
  },
  computed: {
    sessionId() {
      return this.$store.state.im.currSessionId;
    },
    scene() {
      return this.sessionId && util.parseSession(this.sessionId).scene;
    },
    to() {
      return this.sessionId && util.parseSession(this.sessionId).to;
    },
    myInfo() {
      return this.$store.state.im.myInfo;
    },
    userInfos() {
      return this.$store.state.im.userInfos;
    },
    msglist() {
      return this.$store.state.im.currSessionMsgs;
    },
    canLoadMore() {
      return !this.$store.state.im.noMoreHistoryMsgs;
    },
    myPhoneId() {
      return this.$store.state.im.userUID;
    },
    sessionlist() {
      return this.$store.state.im.sessionlist;
    },
    initNimSuccess() {
      return this.$store.state.im.initNimSuccess && this.sessionlist.length;
    },
    unread() {
      let count = 0;
      let sessionlist = this.sessionlist.filter(item => {
        if (item.to === this.myPhoneId) {
          return false;
        }
        count += item.unread;
      });
      return count;
    }
  },
  methods: {
    onClose() {
      this.$store.dispatch("im/resetCurrSession");
      this.$store.commit("im/resetNoMoreHistoryMsgs");
    },
    msgsLoaded() {
      // pageUtil.scrollChatListDown();
    },
    onOpen() {
      let sessionId = this.$store.state.im.lastSessionId;

      if (!sessionId && this.sessionlist.length) {
        sessionId = this.sessionlist[0].id;
      }

      if(this.detailsId && this.userInfos[this.detailsId]) {
        sessionId = 'p2p-' + this.detailsId;
      }

      if (!sessionId) return;

      this.$store.dispatch("im/setCurrSession", sessionId);

      this.getLocalMsgs();
      this.chatDlgVisibled = true;
    },
    getLocalMsgs(count) {
      if (this.canLoadMore) {
        this.$store.dispatch("im/getHistoryMsgs", {
          scene: this.scene,
          to: this.to,
          limit: 10
        });
      }
    }
  }
};
</script>

<style lang="less" scoped>
.m-chat-main {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
  overflow: hidden;
}
.m-chat-left {
  float: left;
  width: 260px;
  height: 100%;
  border-right: 3px solid #f7f8fc;
}
.chat-tips {
  position: fixed;
  top: 153px;
  right: 5%;
  width: 105px;
  height: 105px;
  border-radius: 50%;
  text-align: center;
  background: url(../../assets/images/c2c/chat_bg.png) no-repeat;
  cursor: pointer;
  z-index: 98;
  .msg {
    display: inline-block;
    position: relative;
    margin-top: 25px;
    width: 30px;
    height: 30px;
    background: url(../../assets/images/msg.png) no-repeat;
  }
  .icon-circle {
    position: absolute;
    width: 16px;
    height: 16px;
    top: -2px;
    right: -2px;
    background: #ff4f5a;
    border: 1px solid #fff;
    border-radius: 50%;
    line-height: 16px;
    em {
      display: inline-block;
      font-size: 12px;
      font-familyA: PingFangSC-Medium;
      font-weight: 500;
      font-style: normal;
      color: #fff;
      transform: scale(0.8);
    }
  }
  .chat-text {
    height: 17px;
    font-size: 12px;
    margin-top: 2px;
    color: #33385e;
    line-height: 17px;
  }
}
/deep/.chat-dialog {
  .el-dialog__header {
    padding: 15px 0 12px;
    background: #f2f6fa;
    .el-dialog__title {
      font-size: 16px;
      line-height: 24px;
      color: #333;
    }
  }
  .el-dialog__body {
    padding: 0;
  }
}
</style>